<template>
    <div>
    <header>
        <img src="img/banneryidong2x.png" alt="">
    </header>
    <!-- 导航栏 -->
     <nav>
         <div class="item" @click="pushApprover"><img src="img/shenpi12x.png" alt=""><span>审批管理</span></div>
         <div class="item" @click="pushDistribution"><img src="img/fenpei2x.png" alt=""><span>课程分配</span></div>
         <div class="item" @click="pushCheck"><img src="img/hedaoducha2x.png" alt=""><span>督导核查</span></div>
     </nav>
     <!-- 滚动消息 -->
     <div class="message">
         <div class="img">
            <img src="img/xiaoxi222x.png" alt="">
         </div>
         <div class="slide">
             <span>消息:</span> 
             <van-swipe class="my-swipe" :autoplay="3000" :vertical="true" indicator-color="white">
                <van-swipe-item v-for="(data,index) in message" :key="index">
                    <div class="swipers" @click="msgDetail(data.id)">
                        <!-- 管理员{{data.createTime.substring(0,10)}}为您开通{{data.courseName}}的课程权限，请及时进行课程的学习!  -->
                        管理员为您开通 {{data.courseName}} 的课程权限，请及时进行课程的学习! 
                    </div>
                </van-swipe-item>
            </van-swipe>
         </div>
     </div>
     <!-- 课程浏览 -->
     <div class="title">课程浏览</div>
     <van-skeleton :loading="loading" avatar title :row="6">
     <ul v-if="show">
         <li v-for="(data,index) in list" @click="pushDetail(data)" :key="index">
             <div class="img">
                <img  v-lazy="data.courseImg" alt="">
             </div>
             <div class="right">
                 <h2>{{data.courseName}}</h2>
                 <p>该课程为{{data.courseName}},</p>
                 <p>该课程已完成{{ Math.ceil(((data.textProgress*1 + data.videoProgress*1)) / 2)}}%</p>
             </div>
             <div class="process">
                 <p>完成度</p>
                 <p>{{ Math.ceil(((data.textProgress*1 + data.videoProgress*1)) / 2)}}%</p>
             </div>
         </li>
     </ul>
     <div v-else class="blank">
         <div class="emply">
             <img src="img/quesheng1@2x.png" alt=""><span>暂无浏览课程</span>
         </div>
     </div>
     </van-skeleton>
    </div>
</template>
<script>
import Header from '@/components/Header'
export default {
    mounted() {
        this.loading = true;
        (async ()=>{
            const data = await this.get('/course/showIcrobotNearLook',{userId:localStorage.getItem('id')});
            const message = await this.get('/course/queryUserCourseTask',{userId:localStorage.getItem('id'),pageNum:1,pageSize:8});
            this.message = message.data.items;
            this.list = data.data;
            this.loading = false;
            if(!this.list.length){
                this.show = false;
            }
        })()
    },
    components:{
        Header
    },
    data() {
        return {
            list:[],
            message:[],
            show:true,
            loading:false
        }
    },
    methods: {
        msgDetail(id){
            this.$router.push({
                path:'/msgDetails',
                query:{
                    id
                }
                })
        },
        pushDistribution(){
            (async ()=>{
                let { data } = await this.get('/user/user');
                let role = data.userRoles;
                let bool = (role.some(item=>item.roleName == '课程权限分配管理员'));
                    if(!bool){
                        this.Toast('您没有权限进行课程分配！')
                        return
                    }
                    this.$router.push({
                        path:'/list'
                    })
            })()
            // let roleArr = JSON.parse(localStorage.getItem('name'));
            // let bool = (roleArr.some(item=>item.roleName == '课程管理员'));
            // if(!bool){
            //     this.Toast('您没有权限进行课程分配！')
            //     return
            // }
            // this.$router.push({
            //     path:'/list'
            // })
        },
        pushCheck(){
            (async ()=>{
                let { data } = await this.get('/user/user');
                let role = data.userRoles;
                let bool = (role.some(item=>item.roleName == '督导核查'));
                if(!bool){
                    this.Toast('您没有权限进行督导核查！')
                    return
                }
                this.$router.push({
                    path:'/check'
                })
            })()
            
        },
        pushApprover(){
             (async ()=>{
                let { data } = await this.get('/user/user');
                let role = data.userRoles;
                let bool = role.some(item=>item.roleName == '加盟校审批管理员') || role.some(item=>item.roleName == '加盟校长')
                    if(!bool){
                        this.Toast('您没有权限进行审批！')
                        return
                    }
                    this.$router.push({
                        path:'/approvehome'
                    })
            })()
            // let roleArr = JSON.parse(localStorage.getItem('name')) 
            // let bool = (roleArr.some(item=>item.roleName == '加盟校审批管理员') || roleArr.some(item=>item.roleName == '加盟校长'));
            // if(!bool){
            //     this.Toast('您没有权限进行审批！')
            //     return
            // }
            // this.$router.push({
            //     path:'/approvehome'
            // })
        },
         pushDetail(data){
            (async ()=>{
                await this.get('/course/insertIcrobotNearLook',{userId:localStorage.getItem('id'),classId:data.courseId}); 
            })()
            
            this.$router.push({
                path:'/details',
                query:{
                    title:data.courseName,
                    id:data.courseId,
                    textTime:data.textTime,
                    videoTime:data.videoTime,
                    textProgress:data.textProgress,
                    videoProgress:data.videoProgress,
                    courseName:data.courseName
                }
                });
        }
    
    },
}
</script>
<style lang="scss" scoped>
    header{
        img{
            width: 100%;
            height: 2.78rem;
            vertical-align: top;
        }
    }
    .swipers{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 5rem;
    }
    .blank{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.2rem;
        .emply{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 1.66rem;
                height: 1.26rem;
            }
            span{
                margin-top: 0.4rem;
                font-size: 0.28rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #C7C7C7;
            }
        }
    }
    nav{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0.3rem 0.24rem 0;
        box-sizing: border-box;
        transform: translateY(-0.2rem);
        border-radius: 0.25rem  0.25rem 0 0;
        background: white;
        .item{
            width: 2rem;
            height: 0.88rem; 
            font-size: 0.24rem;
            display: flex;
            align-items: center;
            padding-left: 0.2rem;
            box-sizing: border-box;
            border: 0.01rem solid rgba(212, 212, 212, 0.15);
            border-radius: 0.1rem;
            img{
                width:0.5rem;
                height: 0.5rem;
                margin-right: 0.13rem;
            }
        }
    }
    .message{
        font-size: 0.22rem;
        display: flex;
        padding: 0 0.2rem;
        box-sizing: border-box;
        align-items: center;
        .img{
            width: 0.21rem;
            height: 0.25rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .slide{
            margin-left: 0.1rem;
            display: flex;
            color: #727272;
            align-items: center;
            span{
                display: inline-block;
                width: 1.4rem;
            }
            .my-swipe{
                width: 100%;
                height: 0.3rem;
            }
        }
    }
    .title{
        font-size: 0.32rem;
        padding: 0.05rem 0.2rem;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-weight: 500;
        color: #282828;
        margin-top: 0.25rem;
    }
    ul{
        padding: 0 0.2rem;
        box-sizing: border-box;
        li{
            margin-top: 0.2rem;
            width: 100%;
            height: 2.2rem;
            background: #F7F9FA;
            border-radius: 0.15rem;
            padding: 0.22rem;
            box-sizing: border-box;
            display: flex;
            position: relative;
            .img{
                width: 3rem;
                height: 1.76rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .right{
                margin-left: 0.25rem;
                width: 3.3rem;
                h2{
                    font-size: 0.26rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #282828;
                }
                p{   
                    font-size: 0.2rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #A4A4A4;
                    line-height: 0.32rem;
                    margin-top: 0.1rem;
                    overflow: hidden;
                }
            }
            .process{
                position: absolute;
                left: 0;
                top: 0;
                width: 1.2rem;
                height: 0.58rem;
                border-radius: 0.15rem 0 0.15rem 0;
                background: #2A9CFF;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                p{
                    font-size: 0.16rem;
                    color: white;
                    text-align: center;
                }
            }
        }
    }
</style>